<template>
    <div class="main">
        <div class="header">
            <div class="img">
                <img src="../assets/images/pool_u.png" alt="">
                <!-- <img src="../assets/images/pool_h.png" alt=""> -->
            </div>
            <div class="cont">
                <div class="title">{{detail.title}}</div>
                <div class="des">USDT</div>
            </div>
        </div>        
        <!-- <div class="line_cont">
            <ve-line 
            height="6rem"
            :axis-visible="false" 
            :legend-visible="false" 
            :data="chartData" 
            :settings="chartSettings">
            </ve-line>
        </div> -->
        <div class="number">
            <div class="char">
                <div class="items">
                    <div class="item">
                        <h4>
                            <!-- 年化收益率 -->
                            {{ $t("m.nianhuashouyilv") }}
                        </h4>
                        <p>{{detail.radio*100||0}}%</p>
                    </div>
                    <div class="item">
                        <h4>
                            <!-- 起投金额 -->
                            {{$t("m.qitoujine")}}
                        </h4>
                        <p>{{detail.minPay}}USDT</p>
                    </div>
                    <div class="item">
                        <h4>
                            <!-- 挖矿周期 -->
                            {{$t("m.wakuangzhouqi")}}
                        </h4>
                        <p>{{detail.day||0}}{{$t("m.tian")}}</p>
                    </div>
                </div>
                
            </div>
            <div class="input">
                <van-field v-model="amount" :placeholder="active==0?$t('m.qsrsc'):$t('m.qsrtq')" />
                <div class="all" @click="clickMax">MAX</div>
            </div>
            <div class="balance">
                <!-- 可用余额：0.0000 USDT --><!-- 可提取余额：0.0000 USDT -->
                {{active==0?$t("m.keyongyue"):$t("m.ketiquyue")}}：{{walletData.trxAmount}} USDT
            </div>
            <!-- <div class="btn">
                <div class="submit" @click="tab_click(0)">
                    
                    {{$t("m.cunru")}}
                </div>
                <div class="submit" @click="tab_click(1)">
                    
                    {{$t("m.quchu")}}
                </div>
            </div>    -->
            <div id="submit" @click="submit">
                确定
            </div>         
        </div>
        <div class="pact">
            <van-checkbox icon-size="14px" v-model="ispact" shape="square">
                <!-- 我已阅读并同意 -->
                {{$t("m.tongyi")}}
            </van-checkbox>
            <span @click="pactClick">《产品风险协议》</span>
        </div>
        <div class="rule">
            <div class="cont">
                <div class="title">
                    <!-- 收益规则 -->
                    {{$t("m.shouyiguize")}}
                </div>
                <div class="des">{{detail.rule}}</div>
            </div>
        </div>
        <div class="rule">
            <div class="cont">
                <div class="title">
                    <!-- 产品介绍 -->
                    {{$t("m.cpjs")}}
                </div>
                <div class="des">{{detail.introduce}}</div>
            </div>
        </div>
        <!-- 协议弹出层 -->
        <van-popup v-model="show" style="width:100%">
            <div class="pact_content">
                {{detail.agreement}}
                <div class="btn" @click="closePact">
                    确定
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
export default {
    data(){
        this.chartSettings = {
            area: true
        }
        return {
            show:false,
            active:0,
            detail:{},//商品详情
            amount:null,
            ispact:false,
            chartData: {
                columns: ['日期','下单率'],
                rows: [
                    { '日期': '','下单率': 0 },
                    { '日期': '1/1','下单率': 22 },
                    { '日期': '1/2','下单率': 50 },
                    { '日期': '1/3','下单率': 75 },
                    { '日期': '1/4','下单率': 101 },
                    { '日期': '1/5', '下单率': 150 },
                    { '日期': '1/6','下单率': 200 },
                    { '日期': '1/7','下单率': 500 },
                    { '日期': '1/8','下单率': 600 },
                    { '日期': '1/9','下单率': 700 },
                    { '日期': '1/10', '下单率': 750 },
                    { '日期': '1/11','下单率': 777 }
                ]
            },
            walletData:{},
        }
    },
    mounted(){
        this.walletData = this.$store.getters.s
        console.log('routers--------',this.$route)
        this.getDetail()
    },
    methods:{
        // 点击全部
        clickMax(){
            this.amount = this.walletData.trxAmount
        },
        // 点击协议
        pactClick(){
            this.show = true
        },
        //关闭协议
        closePact(){
            this.show = false
        },
        // 切换
        tab_click(e){
            this.active = e
        },
        // 提交
        submit(){
            if (this.active == 0) {
                this.deposit()
            }
        },
        //点击存入
        deposit(){
            if (!this.ispact) {
                this.$toast('同意协议后继续');
                return
            }
            
            if (this.amount<=0) {
                this.$toast('输入金额不正确');
                return
            }
            this.$toast.loading({
                message: 'loading...',
                forbidClick: true,
            });
            this.$post({
                url: "ums-product-history/createProductHistory",
                data: {
                    amount:this.amount,
                    pid:this.detail.id,
                    trxAddress: this.$store.getters.userWallet,
                    uid:this.$store.getters.s.id
                },
                callback: (data) => {
                    this.$nextTick(function () {
                        if (data.code == 200) {
                            
                        }
                        this.$toast(data.message);
                    });
                },
            });
        },
        // 获取产品详情
        getDetail(){
            this.$get({
				url: "ums-product/getOne",
				data: {
                    id:this.$route.params.id
                },
				callback: (data) => {
					this.$nextTick(function () {
						if (data.data) {
                            this.detail = data.data
						}
					});
				},
			});
        }
    }
}
</script>
<style scoped>
    .header{
        display: flex;
        align-items: center;
        color: #ffffff;
        padding: 0.5rem 0.42rem 0 0.42rem;
        text-align: left;
    }
    .header .img img{
        width: 0.67rem;
        height: 0.67rem;
        margin-right: 0.2rem;
    }
    .header .cont .title{
        font-size: 0.3rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #53FBFD;
        line-height: 0.37rem;
    }
    .header .cont .des{
        font-size: 0.20rem;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #ffffff
    }
    .char{
        padding: 0.3rem 0rem;
    }
    .char .items{
        display: flex;
        justify-content: space-between;
    }
    .char .items .item{
        /* margin-right: 0.8rem; */
        text-align: center;
    }
    .char .items .item h4{
        font-size: 0.26rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color:#acb1b1;
        line-height: 0.43rem;
        margin: 0;
    }
    .char .items .item p{
        margin: 0;
        font-size: 0.3rem;
        font-weight: bold;
        color: #ffffff;
        margin-top: 0.1rem;
    }
    .line_cont{
        width: 110%;
        height: 3rem;
        position: relative;
        left: -8%;
        top:0;
    }
    .line_cont .ve-line{
        top:-1rem
    }
    .number{
        margin: 0.34rem 0.22rem 0 0.22rem;
        background:url('../assets/images/bk.png')center center no-repeat;
        background-size:100% 96%;
        padding: 0.45rem 0.37rem 0.57rem 0.37rem;
        box-sizing: border-box;
    }
    .number .balance{
        font-size: 0.24rem;
        font-weight: 400;
        color: #43D1D9;
        line-height: 0.4rem;
        text-align: right;
        margin-top: 0.3rem;
    }
    .number .input{
        width: 90%;
        margin: 0.2rem auto 0 auto;
        display: flex;
        align-items: center;
    }
    .number .input .all{
        font-size: 0.28rem;
        color: #FFFFFF;
        padding: 0.05rem 0.15rem;
        font-weight: bold;
        white-space: nowrap;
        margin-left: 0.1rem;
        border: 1px solid #ffffff;
        border-radius: 5px;

    }
    .number .van-cell {
        
        background-color: transparent;
        padding: 0.05rem 0.15rem;
        background-color: rgba(0, 0, 0, 0.3);
    }
    .number .btn{
        display: flex;
        justify-content: space-between;
    }
    .number .submit{
        width: 2.4rem;
        height: 0.82rem;
        background: url("../assets/images/zc_bg.png")center center no-repeat;
        background-size: 100%;
        margin: 0.18rem auto;
        font-size: 0.3rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 0.82rem;
    }
    .pact{
        padding: 0.2rem 0.26rem;
        font-size: 0.24rem;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 0.6rem;
        display: flex;
        align-items: center;
    }
    .pact>>>.van-checkbox__label{
        color: #43D1D9;
    }
    .pact span{
        color: #ffffff;
    }
    .pact_content{
        padding: 0.32rem;
        font-size: 0.22rem;
        line-height: 0.44rem;
        width: 100%;
        min-height: 100vh;
        background-color: #ffffff;
        box-sizing: border-box;
        text-align: left;
        position: relative;
    }
    .pact_content .btn{
        width: 2rem;
        height: 0.8rem;
        line-height: 0.8rem;
        text-align: center;
        background-color: #235580;
        color: #ffffff;
        border-radius: 0.4rem;
        margin: 0.4rem auto;
    }
    .rule{
        padding-bottom: 0.2rem;
    }
    .rule .cont{
        margin: 0.3rem 0.26rem 0 0.26rem;
        background:url('../assets/images/gzbg.png')center/cover no-repeat;
        padding: 0.31rem 0.26rem 0.43rem 0.26rem;
    }
    .rule .title,.rule .des{
        font-size: 0.24rem;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #01E1E2;
        line-height: 0.4rem;
        text-align: left;
    }
    .rule .des{
        font-weight: 300;
        color: #FFFFFF;
        text-align: left;
        margin-top: 0.3rem;
    }
    #submit{
        color: #ffffff;
        font-size: 0.35rem;
        width: 80%;
        line-height: 35px;
        border-radius: 3px;
        margin: 0.2rem auto 0 auto;
        background-color: #235580;
    }
</style>